<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>专家挑选</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
    <link th:href="@{/css/tool.css}" rel="stylesheet"/>
    <!-- 图标  -->
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1531710_xb357ub1wmg.css"/>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <script th:src="@{/js/marked.min.js}" type="text/javascript"></script>
</head>
<body>
<div class="layui-fluid main">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-lg9">
            <h1>专家挑选</h1>
            <hr>
            <div class="layui-form"  lay-filter="">
                <input type="hidden" id="zbId" name="zbId" th:value="${zbId}">
                <div class="layui-form-item" style="width: 235px">
                    <label class="layui-form-label">专家人数</label>
                    <div class="layui-input-block">
                        <input type="number" id="number" name="number" lay-verify="number" autocomplete="off"
                               placeholder="请输入专家人数"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item" style="width: 235px;">
                    <label class="layui-form-label">评标方向</label>
                    <div class="layui-input-block">
                        <select name="type" id="type1" lay-filter="aihao">
                            <option value="" selected="">选择评标方向</option>
                            <option value="0">方向1</option>
                            <option value="1">方向2</option>
                            <option value="2">方向3</option>
                            <option value="3">方向4</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button  id="select" class="layui-btn"  lay-filter="demo1">立即挑选
                        </button>
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-col-lg3">
            <h1>小提醒</h1>
            <hr>
            <h3>1.按照招标规模挑选专家人数</h3>
            <h3>2.按照招标的方向选择评标专家的方向</h3>

        </div>
        <div class="layui-col-lg12">
            <h1>专家挑选结果展示</h1>
            <hr>
            <div class="layui-container">
                <table id="view"></table>
            </div>
        </div>
    </div>

</div>
</body>

<script type="text/html" id="type">
    {{#  if(d.type == 0){ }}
    <div>
        方向1
    </div>
    {{#  } else if(d.type == 1){ }}
    <div>
        方向2
    </div>
    {{#  } else if(d.type == 2){ }}
    <div>
        方向3
    </div>
    {{#  } else if(d.type == 3){ }}
    <div>
        方向4
    </div>

    {{#  } }}

</script>

<script type="text/javascript">
    layui.use(['form', 'laydate', 'table', 'element', 'jquery'], function () {
        var form = layui.form
            , laydate = layui.laydate
            , upload = layui.upload
            , $ = layui.jquery
            , table = layui.table;


        var view = table.render({
            elem: '#view'
            , height: 312
            , url: '/expert/select' //数据接口
            // , page: true //开启分页
            , method: 'post'
            , where: {
                number: $('#number').val(),
                type: $('#type1').val(),
                zbId: $('#zbId').val()
            }
            , cols: [
                [ //表头
                    {field: 'expertId', title: '专家编号', fixed: 'left'}
                    , {field: 'name', title: '专家姓名'}
                    , {field: 'type', title: '评标方向', templet: '#type'}
                    , {field: 'level', title: '专家等级'}
                ]
            ]
            ,
            text: {none: '暂无数据，请挑选评标专家'}
            ,id:'tableView'
        });

        $('#select').click(function () {
            layer.alert("已向评标专家发送通知");

            table.reload('tableView', {
                where: {
                    number: $('#number').val(),
                    type: $('#type1').val(),
                    zbId: $('#zbId').val()
                }
            })

        })

    });
</script>
</html>